<template>
	<view class="box pr">
		<view class="rock_box">
			<image :src="rock_bg" class="bg pa" />
			<view class="x-c">
				<image :src="rock" class="title" />
			</view>
			<view class="my x-c pr">
				<view class="myscore">我的积分：{{points}}分</view>
				<view class="rule pa ">
					<view class="name" @click="jumpTask">游戏规则</view>
				</view>
			</view>
			<view class="pr">
				<view class="x-c">
					<image :src="cricle_box" class="circle" />
				</view>
				<image :src="red" :class="[{'r1': shrinkPacket}, {'r2': !shrinkPacket}]" class="red pa" />
			</view>
			<view class="x-c" style="padding-top: 20rpx;color: #fff;">
				每次游戏将花费您{{userdScore.consume_points}}积分
				<view class="" v-if="free_count != 0">，可免费{{free_count || 0}}次数</view>
				</view>
			<!-- 更多推荐 -->
			<view class="title_more">更多推荐</view>
			<view class="more x-c">
				<view class="more_box  x-bc">
					<view class="card">
						<view class="title_card">全民推广 就等你</view>
						<view class="label">推广任务成功获大额积分</view>
						<view class="go x-c" @click="jumpExc">
							<view class="name">立即前往</view>
						</view>
					</view>
					<image :src="man" />
				</view>
			</view>
		</view>
		<!-- 未中奖 -->
		<view class="no_prize pf" v-if="noprize">
			<view class="box">
				<view class="card x-c">
					<image :src="nopop" />
				</view>
				<view class="btn x-c">
					<view class="goTo x-c" @click="goPrize">继续摇奖</view>
				</view>
			</view>
		</view>
		<!-- 中奖 -->
		<view class="prize pf" v-if="prize">
			<view class="box">
				<view class="card x-c pr">
					<image :src="pop" />
					<view class="score pa">{{result}}</view>
				</view>
				<view class="btn x-c">
					<view class="goTo x-c" @click="goPrize">继续摇奖</view>
				</view>
			</view>
		</view>
		<view class="finish_box pf" v-if="finish_status">
			<view class="card pa">
				<view class="name x-c">温馨提示</view>
				<view class="text x-c">每次游戏将花费您{{userdScore.consume_points}}积分</view>
				<view class="btn x-ac">
					<view class="cancel" @click="cancel">取消</view>
					<view class="finally" @click="finall">确定</view>
				</view>
			</view>
		</view>
	</view>
</template>
<script>
	import {
		mapState
	} from 'vuex';
	export default {
		data() {
			return {
				noprize: false, // 未中奖
				prize: false, // 中奖
				cricle_box: this.imgUrl + 'cricle_box.png',
				red: this.imgUrl + 'red.png',
				pop: this.imgUrl + 'pop.png',
				nopop: this.imgUrl + 'nopop.png',
				man: this.imgUrl + 'man.png',
				yellow: this.imgUrl + 'yellow.png',
				rock_bg: this.imgUrl + 'rock_bg.png',
				rock: this.imgUrl + 'rock.png',
				shrinkPacket: true,
				obj: {
					key: ''
				},
				status: false,
				result: '', // 抽奖结果
				sum: 0,
				free_count: 0, // 免费次数
				finish_status: true,
			};
		},
		computed: {
			...mapState({
				game: state => state.member.game, // 游戏数据
				user: state => state.user.user, // 用户信息
				key: state => state.game.key, // 游戏key值
				points: state => state.init.points, // 剩余积分
				userdScore: state => state.game.priseRes // 花费积分// 游戏key值
			})
		},
		mounted() {
			this.free_count = this.userdScore.free_count
			// 开始摇奖
			this.goShake();
			this.timer = setInterval(() => {
				this.shrinkPacket = !this.shrinkPacket
			}, 500);
		},
		methods: {
			cancel() {
				this.$Router.back(1)
			},
			finall() {
				this.finish_status = false
			},
			jumpTask() {
				this.$Router.push({
					path: '/pages/activity/rule/index'
				})
			},
			jumpExc() {
				this.$Router.push({
					path: '/pages/activity/extension/index'
				})
			},
			goShake() {
				let that = this;
				let sum = 0;
				let obj = {
					key: this.key
				}
				uni.onAccelerometerChange(function(res) {
					if (sum == 1) return;
					/*
					设置加速度在某个坐标轴方向达到的数值，手机随便一动，
					都会产生加速度，不限制值的话，没法观察界面变化的情况，效果就不好了，
					我们加速度的变化一般都在0-1之间，因此设置0.5，效果还是比较适合的
					*/
					if (res.x > 0.5 && sum < 1 || res.y > 0.5 && sum < 1) {
						sum++;
						// 取消监听速度
						uni.offAccelerometerChange();
						that.$api('game.luckdraw', obj).then(res => {
							if (res.status != 1) return;
							if (this.free_count > 0) {
								this.free_count--
							}
							that.$store.dispatch('init/get_Points');
							// 微信震动
							wx.vibrateLong({
								success: (res) => {},
								fail: (e) => {}
							})
							let arr = res
							sum = 0;
							that.sum = 0;
							that.result = arr.data
							if (arr.data == '谢谢惠顾') {
								that.noprize = true;
							} else {
								that.prize = true;
							}
						}).catch(e => {})
					}
				});
			},
			// 继续摇奖
			goPrize() {
				this.prize = false;
				this.noprize = false;
				this.sum++;
				if (this.sum === 1) {
					this.goShake();
				}
			},
		}
	};
</script>

<style scoped lang="scss">
	@import './index.scss';

	.r1 {
		transform: rotate(7deg) !important;
	}

	.r2 {
		transform: rotate(35deg) !important;
	}
</style>
